<template>
  <div class="login-panel" :style="{ width: panelWidth + 'px' }">
    <!-- 顶部标题 -->
    <h1 class="title">{{ panelTitle }}</h1>

    <!-- tab栏 -->
    <div class="tabs">
      <el-tabs v-model="activeName" type="border-card" stretch @tab-click="handleClick">
        <el-tab-pane name="account">
          <template #label>
            <div class="label">
              <el-icon><UserFilled /></el-icon>
              <span class="text">帐号登录</span>
            </div>
          </template>
          <div class="pane-area">
            <pane-account ref="accountRef"></pane-account>
          </div>
        </el-tab-pane>
        <el-tab-pane name="phone"
          ><template #label>
            <div class="label">
              <el-icon><Iphone /></el-icon>
              <span class="text">手机登录</span>
            </div>
          </template>
          <div class="pane-area">
            <pane-phone></pane-phone>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 底部区域 -->
    <div class="controls">
      <el-checkbox v-model="keepPwd">记住密码</el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>
    <el-button class="login-btn" type="primary" size="large" @click="handleLoginBtnClick">
      立即登录
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { TabsPaneContext } from "element-plus"
import paneAccount from "./pane-account.vue"
import panePhone from "./pane-phone.vue"
import { localCache } from "@/utils/cacheData"
import { CACHE_KEEPPWD } from "@/global/constants"

defineProps({
  panelWidth: {
    type: Number,
    default: 330
  },
  panelTitle: {
    type: String,
    default: "后台管理系统"
  }
})

// 有初始化值会对其进行类型推导，把他推导成布尔类型
// 如果没给初始化值，可以给ref函数传一个泛型
// const keepPwd = ref<boolean>()
const keepPwd = ref<boolean>(localCache.getCache(CACHE_KEEPPWD) ?? false)
// 缓存记录一下是否保存密码
// watch(keepPwd, (newValue) => {
//   console.log(CACHE_KEEPPWD, newValue)
//   localCache.setCache(CACHE_KEEPPWD, newValue)
// })

// 获取登录组件的实例
/* 
  直接这样ref<paneAccount>()是不行的，paneAccount是一个值
  accountRef保存的是paneAccount组件创建出来的实例的类型

  组件虽然写的时候是export default {}，但导出的东西可以看成是一个构造器，
   > 其实InstanceType传入是是构造器类型，
     获取的是构造器的返回值【即实例】作为类型
*/
const accountRef = ref<InstanceType<typeof paneAccount>>()
const activeName = ref("account")

function handleLoginBtnClick() {
  if (activeName.value === "account") {
    // 获取子组件的实例，执行暴露出的登录函数
    // 传入一个是否记住密码
    accountRef.value?.loginAction(keepPwd.value)
  } else {
    console.log("用户在进行手机登录")
  }
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style lang="less" scoped>
.el-tabs {
  --el-tabs-header-height: 50px;
}
.login-panel {
  margin-bottom: 150px;

  .title {
    text-align: center;
    margin-bottom: 30px;
  }

  .tabs {
    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;

      .text {
        margin-left: 5px;
      }
    }

    .pane-area {
      margin-top: 16px;
    }
  }

  .controls {
    margin-top: 12px;
    display: flex;

    justify-content: space-between;
  }

  .login-btn {
    margin-top: 10px;
    width: 100%;
    // 如果是在:root里面设置，是设置全局的值
    // 因为这个元素里面有设置这个变量的值，会以这个值为主
    // 想修改直接在这个类里面修改变量的值就行
    --el-button-size: 42px;
    font-size: 16px;
    letter-spacing: 1px;
  }
}
</style>
